<template>
    <section class="page-bg" id="canvasDom">
        <n-flex vertical justify="flex-start">
            <header class="header">
                <section class="head-left">
                    <span>{{today}}</span>
                </section>
                <header class="head-center">某某厂配件生产中心</header>
                <section class="head-right" data-html2canvas-ignore="true">
                    <ScreenshotKit :downloadName="'某某厂配件生产中心'" />
                </section>
            </header>

            <main class="main">
                <section class="mian-num-card">
                    <n-grid :x-gap="8" :cols="3">
                        <!-- three-one -->
                        <n-grid-item>
                            <n-grid :x-gap="4" :cols="2">
                                <n-grid-item class="card-color">
                                    <p class="card-title">产成品达标率</p>
                                    <section>
                                        <n-grid x-gap="6" :cols="2">
                                            <n-gi>
                                                <n-flex vertical :align="'center'">
                                                    <span class="rate">{{ finishPre + '%' }}</span>
                                                    <span>达标率</span>
                                                </n-flex>
                                            </n-gi>
                                            <n-gi>
                                                <n-flex vertical :align="'center'">
                                                    <span class="rate">{{ losePre + '%' }}</span>
                                                    <span>损耗率</span>
                                                </n-flex>
                                            </n-gi>
                                        </n-grid>
                                    </section>
                                </n-grid-item>
                                <n-grid-item class="card-color">
                                    <p class="card-title">产成品达标率</p>
                                    <section>
                                        <n-grid x-gap="6" :cols="2">
                                            <n-gi>
                                                <n-flex vertical :align="'center'">
                                                    <span class="rate2">{{ finishPre + '%' }}</span>
                                                    <span>达标率</span>
                                                </n-flex>
                                            </n-gi>
                                            <n-gi>
                                                <n-flex vertical :align="'center'">
                                                    <span class="rate2">{{ losePre + '%' }}</span>
                                                    <span>损耗率</span>
                                                </n-flex>
                                            </n-gi>
                                        </n-grid>
                                    </section>
                                </n-grid-item>
                            </n-grid>
                        </n-grid-item>
                        <!-- three-two -->
                        <n-grid-item>
                            <section class="card-color">
                                <n-grid x-gap="8" :cols="4">
                                    <n-gi>
                                        <n-flex vertical :align="'center'">
                                            <span class="rate5">{{ dayProduce }}</span>
                                            <span>日产量</span>
                                        </n-flex>
                                    </n-gi>
                                    <n-gi>
                                        <n-flex vertical :align="'center'">
                                            <span class="rate7">{{ monthProduce }}</span>
                                            <span>月产量</span>
                                        </n-flex>
                                    </n-gi>
                                    <n-gi>
                                        <n-flex vertical :align="'center'">
                                            <span class="rate8">{{ qualityProduce }}</span>
                                            <span>季产量</span>
                                        </n-flex>
                                    </n-gi>
                                    <n-gi>
                                        <n-flex vertical :align="'center'">
                                            <span class="rate6">{{ yearProduce + '万' }}</span>
                                            <span>年产量</span>
                                        </n-flex>
                                    </n-gi>
                                </n-grid>
                            </section>
                        </n-grid-item>
                        <!-- three-last -->
                        <n-grid-item>
                            <section class="card-color">
                                <p class="card-title">产成品达标率</p>
                                <n-grid x-gap="12" :cols="4">
                                    <n-gi>
                                        <n-flex vertical :align="'center'">
                                            <span class="rate">{{ dayProduce }}</span>
                                            <span>日产量</span>
                                        </n-flex>
                                    </n-gi>
                                    <n-gi>
                                        <n-flex vertical :align="'center'">
                                            <span class="rate3">{{ monthProduce }}</span>
                                            <span>月产量</span>
                                        </n-flex>
                                    </n-gi>
                                    <n-gi>
                                        <n-flex vertical :align="'center'">
                                            <span class="rate4">{{ qualityProduce }}</span>
                                            <span>季产量</span>
                                        </n-flex>
                                    </n-gi>
                                    <n-gi>
                                        <n-flex vertical :align="'center'">
                                            <span class="rate2">{{ yearProduce + '万' }}</span>
                                            <span>年产量</span>
                                        </n-flex>
                                    </n-gi>
                                </n-grid>
                            </section>
                        </n-grid-item>
                    </n-grid>
                </section>
                <section class="mian-chart-card">
                    <n-grid :x-gap="8" :cols="3">
                        <!-- left -->
                        <n-grid-item>
                            <section class="main-left">
                                 <n-flex justify="space-between" class="main-left-head">
                                    <span>日平均产量占比统计</span>
                                    <div class="tab-btn">
                                        <span>AM</span>
                                        <span>PM</span>
                                    </div>
                                 </n-flex>
                                 <section>
                                    <LoopPie v-if="pieShow" :canvasHeight="200" :data="loopPieData" @graphicClick="handlePieClick" />
                                 </section>
                                <n-flex justify="space-between" class="main-left-head">
                                    <span>日平均产量占比统计</span>
                                 </n-flex>
                                 <section class="progress-box">
                                    <n-flex justify="flex-start" v-for="(item, i) in progressList" :key="i" style="height: 30px;">
                                        <div class="progress-title">{{item.name}}</div>
                                        <div class="progress-main">
                                            <n-progress type="line" :percentage.number="item.num" :color="item.color" 
                                            :stroke-width="5"
                                            :show-indicator="true"
                                            :indicator-text-color="'#1892d6'" />
                                        </div>
                                    </n-flex>
                                 </section>
                            </section>
                        </n-grid-item>
                        <!-- center -->
                        <n-grid-item>
                            <n-flex vertical>
                                <section class="main-center-box">
                                    <n-flex justify="space-between" class="center-top-head">
                                        <span>热销配件统计</span>
                                        <div class="tab-btn">
                                            <span>配件A</span>
                                            <span>配件B</span>
                                        </div>
                                    </n-flex>
                                    <section>
                                        <MoreLines v-if="mlineShow" :canvasHeight="200" :data="mlineData" />
                                    </section>
                                </section>
                                <section class="main-center-box">
                                    <p class="table-title">生产数据统计</p>
                                    <section class="table-main">
                                        <header class="table-th">
                                            <span v-for="(item, i) in tableData.thData" :key="i">{{item}}</span>
                                        </header>
                                        <section class="table-td" v-for="(item, i) in tableData.dataList" :key="i">
                                            <span>{{item.name}}</span>
                                            <span>{{item.code}}</span>
                                            <span>{{item.type}}</span>
                                            <span>{{item.price}}</span>
                                            <span>{{item.sale}}</span>
                                            <span>{{item.num}}</span>
                                            <span>{{item.saleNum}}</span>
                                            <span>{{item.pre + '%'}}</span>
                                        </section>
                                    </section>
                                </section>
                            </n-flex>
                        </n-grid-item>
                        <!-- right -->
                        <n-grid-item>
                            <section class="main-right">
                                <n-flex justify="space-between" class="center-top-head">
                                    <span>配件详情统计</span>
                                    <div class="tab-btn flex-end">
                                        <span></span>
                                        <span class="flex-start">更多<ChevronForward class="more-icon" /></span>
                                    </div>
                                </n-flex>
                                <n-grid x-gap="8" :cols="4" y-gap="16">
                                    <n-gi v-for="(item, i) in smallCard" :key="i">
                                        <section class="samll-card">
                                            <p><span>定</span><span>{{item.price}}</span></p>
                                            <p><span>售</span><span>{{item.sale}}</span></p>
                                            <p style="color: #f6d06f;">{{item.type}}</p>
                                            <p>{{item.code}}</p>
                                        </section>
                                        <p class="samll-card-title">{{item.name}}</p>
                                    </n-gi>
                                </n-grid>
                            </section>
                        </n-grid-item>
                    </n-grid>
                </section>
                <section class="mian-chart-card">
                    <n-grid x-gap="8" :cols="3" >
                        <n-gi>
                            <section class="footer-box">
                                <n-flex justify="space-between" class="center-top-head">
                                    <span>配件损耗统计</span>
                                    <div class="tab-btn">
                                        <span>YTD</span>
                                        <span>MTD</span>
                                    </div>
                                </n-flex>
                                <MoreBar v-if="mlineShow" :canvasHeight="260" :data="mbarData" />
                            </section>
                        </n-gi>
                        <n-gi>
                            <section class="footer-box">
                                <n-flex justify="space-between" class="center-top-head">
                                    <span>配件损耗统计</span>
                                    <div class="tab-btn">
                                        <span>YTD</span>
                                        <span>MTD</span>
                                    </div>
                                </n-flex>
                                <BarLine v-if="mlineShow" :canvasHeight="260" :data="barLineData" />
                            </section>
                        </n-gi>
                        <n-gi>
                            <section class="footer-box">
                                <n-flex justify="space-between" class="center-top-head">
                                    <span>配件损耗统计</span>
                                    <div class="tab-btn">
                                        <span>周</span>
                                        <span>月</span>
                                    </div>
                                </n-flex>
                                <StackBar v-if="mlineShow" :canvasHeight="260" :data="stackBarData" />
                            </section>
                        </n-gi>
                    </n-grid>
                </section>
            </main>
        </n-flex>
    </section>
    <PieDialog v-if="dialogShow" :showModal="dialogShow" 
    :dialogTitle="'日平均产量'"
    :dialogWidth="'60vw'"
    :dialogHeight="'80vh'"
    :data="dialogData"
    @dialogEvent="handleDialogEvent" />
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { createPinia } from 'pinia'
import { ChevronForward } from '@vicons/ionicons5'
import { DATEFORMAT } from '@/tools/GrobalTools.ts'
import MoreLines from '@/components/charts1/MoreLines.vue';
import LoopPie from '@/components/charts1/LoopPie.vue';
import MoreBar from '@/components/charts1/MoreBar.vue';
import BarLine from '@/components/charts1/BarLine.vue';
import StackBar from '@/components/charts1/StackBar.vue';
import { useChartsStore } from '@/stores/charts';
import ScreenshotKit from '@/components/common/ScreenshotKit.vue';
import PieDialog from '@/components/common/PieDialog.vue';
const pinia = createPinia();
const colors = useChartsStore(pinia)
const today = ref(DATEFORMAT(new Date().getTime(), 'yyyy-MM-dd'))
const finishPre = ref(96.5)
const losePre = ref(2.8)
const dayProduce = ref(580)
const monthProduce = ref(580*30)
const qualityProduce = ref(580*30*3)
const yearProduce = ref(580*30*12 / 10000)
const pieShow = ref(false)
const mlineShow = ref(false)
let dialogShow = ref(false)
const produceNum = ref(5)
const produceList = reactive(['A', 'S', 'C', 'D', 'F'])
let loopPieData = reactive({
    seriesDataList: <Array<object>>[] 
})
let mlineData = reactive({
    xAxisDataList: <Array<string>>[],
    seriesDataList: <Array<object>>[] 
})
let mbarData = reactive({
    xAxisDataList: <Array<string>>[],
    seriesDataList: <Array<object>>[] 
})
let barLineData = reactive({
    xAxisDataList: <Array<string>>[],
    seriesDataList: <Array<object>>[] 
})
let stackBarData = reactive({
    xAxisDataList: <Array<string>>[],
    seriesDataList: <Array<object>>[] 
})
let smallCard = reactive(<Array<object>>[])
let tableData = reactive({
    thData: <Array<string>>[],
    dataList: <Array<object>>[] 
})
let progressList = reactive(<Array<object>>[])
let dialogData = reactive({})
const max = 5000
const min = 1
let initPieData = () => {
    let blist = [],blist2 = [],blist3 = []
    let bList = [],bList2 = [],bList3 = []

    for (let index = 0; index < produceNum.value; index++) {
        let saleNum = Math.floor(Math.random() * (max - min + 1)) + min;
        loopPieData.seriesDataList.push({ value: saleNum, name: '配件'+produceList[index] })
    }

    for (let index = 0; index < 12; index++) {
        smallCard.push({
            price: 100,
            sale: 98.9,
            type: 'YD'+index, 
            code: 'Y1000'+index,
            name: '配件'+index
        })
        
        let bnum = Math.floor(Math.random() * (max - min + 1)) + min;
        mbarData.xAxisDataList.push((index+1)+'月')
        barLineData.xAxisDataList.push((index+1)+'月')
        blist.push(bnum)
        blist2.push(bnum*1.5)
        blist3.push(bnum*2)

        bList.push(bnum)
        bList2.push(bnum*1.5)
        bList3.push(bnum/100)
    }

    mlineData.xAxisDataList = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    mlineData.seriesDataList = [
        {
            name: 'Email',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: 'Union Ads',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: 'Video Ads',
            type: 'line',
            stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
            name: 'Direct',
            type: 'line',
            stack: 'Total',
            data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
            name: 'Search Engine',
            type: 'line',
            stack: 'Total',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]

    tableData.thData = ['配件名','编号','类型','定价','售价','数量','销售量','销售占比']
    for (let index = 0; index < 6; index++) {
        tableData.dataList.push({
            price: 100,
            sale: 98.9,
            type: 'YD100'+index, 
            code: 'Y10000'+index,
            name: '配件A'+index,
            num: Math.floor(Math.random() * (100 - 1 + 1)) + 1,
            saleNum: Math.floor(Math.random() * (100 - 1 + 1)) + 1,
            pre: (Math.floor(Math.random() * (100 - 50 + 50)) + 50).toFixed(2),
        })       
    }
    for (let index = 0; index < 10; index++) {
        progressList.push({
            name: '配件A'+index,
            num: Number((Math.floor(Math.random() * (100 - 1 + 1)) + 1).toFixed(2)),
            color: colors.colors[index > 5 ? index/2 : index]
        })
    }

    
    mbarData.seriesDataList = [
        {
            name: "产品A",
            data: blist,
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
            }
        },
        {
            name: "产品B",
            data: blist2,
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
            }
        },
        {
            name: "产品C",
            data: blist3,
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
            }
        },
    ]
    barLineData.seriesDataList = [
        {
            name: '产成品',
            type: 'bar',
            unit: '箱',
            data: bList
        },
        {
            name: '半成品',
            type: 'bar',
            unit: '箱',
            data: bList2
        },
        {
            name: '产出率',
            type: 'line',
            yAxisIndex: 1,
            unit: "%",
            data: bList3
        },
    ].map(m => {
        m['tooltip'] = {
            valueFormatter: function (value) { return (value as number) + m.unit; }
        }
        return m
    })
    stackBarData.xAxisDataList = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    stackBarData.seriesDataList = [
        {
            name: '产品A',
            data: [320, 302, 301, 334, 390, 330, 320]
        },
        {
            name: '产品B',
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '产品C',
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: '产品D',
            data: [820, 832, 901, 934, 1290, 1330, 1320]
        }
    ].map(m => {
        m['type'] = 'bar'
        m['stack'] = 'total'
        m['label'] = { show: true }
        m['emphasis'] = {focus: 'series'}
        return m
    })

    pieShow.value = true
    mlineShow.value = true
}
initPieData()
const handlePieClick = (data) => {
    console.log('点击==', data);
    dialogData = {...data, chartData: barLineData}
    dialogShow.value = true
}
const handleDialogEvent = (e) => {
    if(e.type === 'no') {
        dialogShow.value = false
    }
    dialogShow.value = false
    console.log('点击handleDialogEvent==', e);
}
onMounted(() => {})
</script>

<style scoped>
header {
    padding: 0;
    margin: 0;
}
.page-bg {
    width: 100%;
    min-height: 100vh;
    background-color: #020e2b;
}
.header {
    width: 100%;
    height: 50px;
    border: 1px solid #0000ff;
    color: #fff;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: #0f2860;
}
.head-left {
    width: 33%;
}
.head-left span {
    display: inline-block;
    text-align: center;
    margin: 0 20px;
}
.head-center {
    width: 33%;
    text-align: center;
}
.head-right {
    width: 33%;
    text-align: right;
}
.more-icon {
    width: 20px;
    height: 20px;
    color: #fff;
}
.main {
    margin: 0 10px 10px 10px;
}
.mian-num-card {
    width: 100%;
    height: 100px;
}
.card-color {
    background-color: #072362;
    border: 1px solid #072362;
    color: #fff;
    font-size: 12px;
    height: 100px;
}
.card-title {
    padding: 4px 10px 0 10px;
    margin-bottom: 8px;
    color: #5fc5ff;
    font-size: 12px;
    font-weight: 600;
}
.rate { font-size: 20px; color: #66dce5; }
.rate2 { font-size: 20px; color: #fcfc73; }
.rate3 { font-size: 20px; color: #f56b6b; }
.rate4 { font-size: 20px; color: #4ef672; }
.rate5 { font-size: 22px; color: #66dce5; margin-top: 10px; }
.rate6 { font-size: 22px; color: #fcfc73; margin-top: 10px; }
.rate7 { font-size: 22px; color: #f56b6b; margin-top: 10px; }
.rate8 { font-size: 22px; color: #4ef672; margin-top: 10px; }
.mian-chart-card {
    margin-top: 8px;
    width: 100%;
    /* min-height: calc(90vh - 155px); */
}
.main-left {
    border: 1px solid #5279d0;
    height: 100%;
    background-color: #072362;
    padding: 5px 10px;
}
.tab-btn span {
    margin-right: 16px;
}
.tab-btn span:first-child {
    color: #f56b6b;
}
.main-left-head {
    border: 1px solid #5279d0;
    height: 24px;
    line-height: 24px;
    color: #fff;
    font-size: 12px;
    padding: 0 4px;
}
.progress-box {
    padding: 0 10px;
    margin: 15px 0;
}
.progress-title {
    max-width: 20%;
    height: 24px;
    line-height: 24px;
    color: #13b6dd;
    font-size: 12px;
    text-align: right;
}
.progress-main {
    width: 80%;
    height: 24px;
    line-height: 24px;
}
.main-center-box {
    background-color: #072362;
    padding: 5px 10px 20px 10px;
    /* height: 262px; */
}
.main-right {
    height: 100%;
    background-color: #072362;
    padding: 5px 10px;
}
.center-top-head {
    width: 100%;
    border: 1px solid #5279d0;
    line-height: 24px;
    color: #fff;
    font-size: 12px;
    padding: 0 4px;
    margin-bottom: 20px;
    /* margin: 10px 0; */
}
.main-right > p {
    width: 100%;
    border: 1px solid #5279d0;
    height: 24px;
    line-height: 24px;
    color: #fff;
    font-size: 12px;
    padding: 0 4px;
}
.samll-card {
    background-color: #072362;
    border: 1px solid #5279d0;
    color: #1a8de9;
    font-size: 12px;
    padding: 0 4px;
    margin: 5px 0;
    border-radius: 4px;
}
.samll-card p {
    height: 26px;
    line-height: 26px;
    text-align: center;
    background-color: #1c55a5;
    margin: 4px 0;
}
.samll-card p span:first-child {
    width: 30%;
    height: 26px;
    text-align: center;
    display: inline-block; 
    font-size: 10px;
}
.samll-card p span:last-child {
    width: 70%;
    height: 26px;
    text-align: center;
    display: inline-block;
    border-left: 2px solid #072362;
}
.samll-card-title {
    color: #1a8de9;
    font-size: 14px;
    text-align: center;
}
.table-title {
    height: 26px;
    line-height: 26px;
    text-align: left;
    color: #a2d4f2;
    padding: 4px 5px;
    font-size: 12px;
}
.table-main {
    width: 100%;
    min-height: 100px;
}
.table-th,
.table-td {
    background-color: #19418a;
    color: #ffffff;
    font-size: 12px;
    border-radius: 20px;
    padding: 4px 10px;
    margin: 10px 0;
}
/* .table-td { margin: 10px 0; } */
.table-th span,
.table-td span {
    width: 12%;
    display: inline-block;
    text-align: center;
}
.table-th span:last-child,
.table-td span:last-child {
    width: 16%;
    display: inline-block;
    text-align: center;
}
.footer-box {
    border: 1px solid #5279d0;
    background-color: #072362;
    padding: 10px 10px 20px 10px;
}
</style>
